<template>
  <view class="mine-container">
    <view class="header-section">
      <uni-nav-bar background-color="transparent" color="#fff" :border="false" title="个人中心"></uni-nav-bar>

      <view class="pad_36">
        <view class="flex align-center">
          <view v-if="!avatar" class="cu-avatar xl bg-white">
            <view class="iconfont icon-people text-gray icon"></view>
          </view>
          <image v-if="avatar" :src="avatar" class="cu-avatar xl" mode="widthFix"></image>
          <!-- <image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl " mode="widthFix"></image> -->
          <view v-if="!name" @click="handleToLogin" class="login-tip">点击登录</view>
          <view v-if="name" @click="handleToInfo" class="user-info">
            <view class="u_title">{{ nickName }}</view>
            <view class="u_id">ID:{{ name }}</view>
          </view>
        </view>
      </view>

      <view class="c-card">
        <view class="card-info">
          <text class="title">项目总进度</text>
          <text class="num">{{projectObj.progress || 0}}%</text>
        </view>

        <view class="progress-container">
          <view class="progress-bar" :style="{width:(projectObj.progress || 0)+'%'}">
            <view class="progress-circle"></view>
          </view>
        </view>

        <view class="finish-date">竣工日期：{{projectObj.endDate}}</view>
      </view>
    </view>

    

    <view class="content-section">
      
      <uni-row class="list-row">
        <uni-col :span="6" class="item-col">
          <view class="">{{records['掘进填报'] || 0}}</view>
          <view class="">掘进填报</view>
        </uni-col>
        <uni-col :span="6" class="item-col">
          <view class="">{{records['掘进工序'] || 0}}</view>
          <view class="">掘进工序</view>
        </uni-col>
        <uni-col :span="6" class="item-col">
          <view class="">{{records['事前上报'] || 0}}</view>
          <view class="">事前上报</view>
        </uni-col>
        <uni-col :span="6" class="item-col">
          <view class="">{{records['安全整改'] || 0}}</view>
          <view class="">安全整改</view>
        </uni-col>
      </uni-row>
      
      <view class="menu-list">
        <view class="list-cell list-cell-arrow" @click="handleToEditInfo">
          <view class="menu-item-box">
            <image class="icon" src="/static/images/home/my-edit.png" mode=""></image>
            <view class="txt">编辑资料</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="handleToSetting">
          <view class="menu-item-box">
            <image class="icon"  src="/static/images/home/my-setting.png" mode=""></image>
            <view class="txt">应用设置</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {getSafetyRecord,getProjectOverview} from '@/api/home.js'
export default {
  data() {
    return {
      name: this.$store.state.user.name,
      records:{},
      projectObj:{ }
    };
  },
  computed: {
    avatar() {
      return this.$store.state.user.avatar;
    },
    nickName() {
      return this.$store.state.user.nickName;
    },
    windowHeight() {
      return uni.getSystemInfoSync().windowHeight - 50;
    }
  },
  onShow() {
    this.getData()
  },
  methods: {
    getData(){
      getProjectOverview().then(res=>{
        this.projectObj=Object.assign({},res.data)
      })
      
      getSafetyRecord().then(res=>{
        if(res.data && res.data.length){
          this.records= Object.assign({},res.data[0])
        }
        
      })
    },
    handleToInfo() {
      this.$tab.navigateTo('/pages/mine/info/index');
    },
    handleToEditInfo() {
      this.$tab.navigateTo('/pages/mine/info/edit');
    },
    handleToSetting() {
      this.$tab.navigateTo('/pages/mine/setting/index');
    },
    handleToLogin() {
      this.$tab.reLaunch('/pages/login');
    },
    handleToAvatar() {
      this.$tab.navigateTo('/pages/mine/avatar/index');
    },
    handleHelp() {
      this.$tab.navigateTo('/pages/mine/help/index');
    },
    handleAbout() {
      this.$tab.navigateTo('/pages/mine/about/index');
    }
  }
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f5f6f7;
}
::v-deep .uni-nav-bar-text {
  font-weight: 500;
  font-size: 36rpx;
}
.pad_36 {
  padding: 36rpx;
}
.mine-container {
  width: 100%;
  height: 100%;

  .header-section {
    height: 540rpx;
    background: url('/static/images/home/my-bg.png') no-repeat #fff;
    background-size: 100% 100%;
    color: white;

    .login-tip {
      font-size: 18px;
      margin-left: 10px;
    }

    .cu-avatar {
      border: 1px solid #eaeaea;

      .icon {
        font-size: 40px;
      }
    }

    .user-info {
      margin-left: 15px;

      .u_title {
        font-size: 18px;
        font-weight: 500;
        line-height: 30px;
      }
    }
  }

  .content-section {
    position: relative;
    top: -10px;
  }
  .menu-list {
    margin: 45rpx 0;
    
    .menu-item-box{
      
      
      .icon{
        width: 42rpx;
        height: 42rpx;
      }
      .txt {
        color: #000000;
        padding-left: 13rpx;
      }
    }
    
  }
  .list-row{
    background: #fff;
    padding-bottom: 30rpx;
    
    .item-col{
      text-align: center;
      font-weight: 500;
      font-size: 28rpx;
      color: #000000;
    }
  }

  .c-card {
    padding: 40rpx 60rpx 0;

    .card-info {
      display: flex;
      justify-content: space-between;

      font-weight: 500;
      font-size: 28rpx;
      color: #ffffff;
      padding-bottom: 16rpx;

      .num {
        font-family: 快看世界体, 快看世界体;
        font-weight: 400;
        font-size: 32rpx;
      }
    }

    .progress-container {
      width: 100%;
      height: 17rpx;
      background-color: rgba(255, 255, 255, 0.1);
      position: relative;
      border-radius: 20rpx;

      .progress-bar {
        height: 100%;
        background-color: #fff;
        position: relative;
        border-radius: 20rpx;
      }

      .progress-circle {
        width: 27rpx;
        height: 27rpx;
        background-color: #fff;
        border-radius: 50%;
        position: absolute;
        top: -5rpx;
        right: 0;
        z-index: 9;
        box-shadow: 0rpx 0rpx 8rpx 4rpx rgba(255, 255, 255, 0.5);
      }
    }

    .finish-date {
      font-weight: 500;
      font-size: 16rpx;
      color: #ffffff;
      padding-top: 16rpx;
    }
    
    
  }
  
}
</style>
